﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>UI Demo</title>
    <link rel="stylesheet" href="Themes/jquery.mobile-1.1.0-rc.1.min.css" />
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script type="text/javascript" src="Scripts/iscroll.js"></script>
    <script type="text/javascript">
        var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper');
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        /* * * * * * * *
        *
        * Use this for high compatibility (iDevice + Android)
        *
        */
        document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
        /*
        * * * * * * * */


        /* * * * * * * *
        *
        * Use this for iDevice only
        *
        */
        //document.addEventListener('DOMContentLoaded', loaded, false);
        /*
        * * * * * * * */


        /* * * * * * * *
        *
        * Use this if nothing else works
        *
        */
        //window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);
        /*
        * * * * * * * */

    </script>
    <style type="text/css" media="all">
        body, ul, li
        {
            padding: 0;
            margin: 0;
            border: 0;
        }
        
        #header
        {
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
        }
        
        #footer
        {
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0;
        }
        
        #wrapper
        {
            position: absolute;
            z-index: 1;
            top: 40px;
            bottom: 40px;
            left: 0;
            width: 100%;
            overflow: auto;
        }
        
        #scroller
        {
            position: absolute;
            z-index: 1; /*	-webkit-touch-callout:none;*/
            width: 100%;
            padding: 0;
        }
    </style>
</head>
<body>
    <div data-role="header" id="header">
        <a href="index.html" data-icon="home" data-iconpos="notext">Home</a>
        <h1>
            Home</h1>
        <a href="index.html" data-icon="gear" data-iconpos="notext">Options</a>
    </div>
    <div id="wrapper">
        <div id="scroller">
            <ul data-role="listview">
                <li><a href="http://www.baidu.com">Pretty row 1</a></li>
                <li><a href="#">Pretty row 2</a></li>
                <li><a href="#">Pretty row 3</a></li>
                <li><a href="#">Pretty row 4</a></li>
                <li><a href="#">Pretty row 5</a></li>
                <li><a href="#">Pretty row 6</a></li>
                <li><a href="#">Pretty row 7</a></li>
                <li><a href="#">Pretty row 8</a></li>
                <li><a href="#">Pretty row 9</a></li>
                <li><a href="#">Pretty row 10</a></li>
                <li><a href="#">Pretty row 11</a></li>
                <li><a href="#">Pretty row 12</a></li>
                <li><a href="#">Pretty row 13</a></li>
                <li><a href="#">Pretty row 14</a></li>
                <li><a href="#">Pretty row 15</a></li>
                <li><a href="#">Pretty row 16</a></li>
                <li><a href="#">Pretty row 17</a></li>
                <li><a href="#">Pretty row 18</a></li>
                <li><a href="#">Pretty row 19</a></li>
                <li><a href="#">Pretty row 20</a></li>
                <li><a href="#">Pretty row 21</a></li>
                <li><a href="#">Pretty row 22</a></li>
                <li><a href="#">Pretty row 23</a></li>
                <li><a href="#">Pretty row 24</a></li>
                <li><a href="#">Pretty row 25</a></li>
                <li><a href="#">Pretty row 26</a></li>
                <li><a href="#">Pretty row 27</a></li>
                <li><a href="#">Pretty row 28</a></li>
                <li><a href="#">Pretty row 29</a></li>
                <li><a href="#">Pretty row 30</a></li>
                <li><a href="#">Pretty row 31</a></li>
                <li><a href="#">Pretty row 32</a></li>
                <li><a href="#">Pretty row 33</a></li>
                <li><a href="#">Pretty row 34</a></li>
                <li><a href="#">Pretty row 35</a></li>
                <li><a href="#">Pretty row 36</a></li>
                <li><a href="#">Pretty row 37</a></li>
                <li><a href="#">Pretty row 38</a></li>
                <li><a href="#">Pretty row 39</a></li>
                <li><a href="#">Pretty row 40</a></li>
            </ul>
        </div>
    </div>
    <div data-role="footer" id="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#home" class="ui-btn-active">Home</a></li>
                <li><a href="#two">Two</a></li>
                <li><a href="#three">Three</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
